<!--流转条件设置-->
<template>
    <div class="edge-attribute">
        <el-form size="mini" label-position="top" label-width="80px">
            <el-form-item label="名称">
                <el-input @input="(value) => {onChange('label', value)}" clearable v-model="config.label"></el-input>
            </el-form-item>
            <el-form-item label="数据流转条件" class="bold">
                <el-select class="" size="mini" v-model="value" placeholder="请选择">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <div v-if="value ==='if'">当数据满足流转条件时，进入这条连接线下的节点；不添加流转条件时，所有数据都会进入这条连接线下的节点。</div>
            <div v-else>当数据不满足同级的其他流转条件时，进入这条连接线下的节点。</div>
            <template v-if="value === 'if'">
                <el-divider></el-divider>
                <div class="tj">
                    符合以下
                    <el-select class="mlr5" style="width: 80px;" size="mini" v-model="include" placeholder="所有">
                        <el-option
                            v-for="item in range"
                            :key="item.value"
                            :label="item.value"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                    流转条件的数据
                </div>
                <el-popover
                    popper-class="popper-class"
                    size="mini"
                    placement="bottom"
                    title=""
                    width="170"
                    trigger="click"
                    :offset="35"
                >
                    <div class="choose-list">
                        <p
                            :class="item.checked ? 'checked': ''"
                            class="pointer"
                            v-for="(item,index) in conditionList"
                            :key="index"
                            @click="addCondition(item)"
                        >
                            {{ item.title }}
                        </p>
                    </div>
                    <el-button slot="reference" type="text" icon="el-icon-plus">添加流转条件
                    </el-button>
                </el-popover>
                <div class="wrap">
                    <div v-for="(item,index) in config.data.selectList" :key="index" class="item pb10">
                        <div class="flex flex-bet">
                            <p class="bold">{{ item.title }}</p>
                            <i class="el-icon-delete pointer" @click="del(index)"></i>
                        </div>
                        <el-input
                            size="mini"
                            placeholder="请输入内容"
                            v-model="item.value"
                            clearable
                        >
                        </el-input>
                    </div>
                </div>
            </template>
        </el-form>
    </div>
</template>

<script>
export default {
    name: 'EdgeAttribute',
    props: {
        config: Object,
        onChange: {
            type: Function,
            default: () => {
            }
        }
    },
    watch: {
        config: {
            handler (e) {
                const conditionList = this.conditionList
                const selectList = this.config.data.selectList
                for (let i = 0; i < conditionList.length; i++) {
                    const index = selectList.findIndex(item => {
                        return item.title === conditionList[i].title
                    })
                    conditionList[i].checked = index > -1
                }
            },
            deep: true
        }
    },
    created () {
        console.log(this.config)
    },
    data () {
        return {
            input: '',
            include: '',
            conditionList: this.config.data.conditionList,
            range: [{
                value: '所有'
            }, {
                value: '任意'
            }],
            options: [{
                value: 'if',
                label: '使用自定义流转条件'
            }, {
                value: 'else',
                label: '使用else条件'
            }],
            value: 'if'
        }
    },
    methods: {
        del (index) {
            this.config.data.selectList.splice(index, 1)
        },
        addCondition (item) {
            item.checked = !item.checked
            const selectList = this.config.data.selectList
            const index = selectList.findIndex((items, index) => {
                return items.title === item.title
            })
            if (item.checked) {
                selectList.push(item)
            } else {
                selectList.splice(index, 1)
            }
        }
    }
}
</script>

<style>

.choose-list p {
    line-height: 24px;
    margin: 0;
}

.choose-list p:hover {
    background: #f6f6f6;
}

.choose-list .checked {
    color: #b3b3b3 !important;
}

</style>
<style scoped lang="scss">
@import "./../../../assets/css/base";

.tj {
    /deep/ .el-input__inner {
        border: none !important;
    }
}

.edge-attribute {
    box-sizing: border-box;
    overflow-y: hidden;
    height: 70vh;
    //&:hover {
    //  overflow-y: scroll;
    //}
    .wrap {
        overflow-y: scroll;
        height: 30vh;
    }
}

.item {
    &:hover {
        background: $color-gray;
    }
}

</style>
